<template>
	<view class="content">
		<view class="top-integral-box">
			<!-- top 用户积分数量 -->
			<view class="integral-num-box">
				<text>{{ info.integral || 0 }}</text>
				<text>可用积分</text>
			</view>
			<view class="top-icon-box">
				<image src="/pageIndex/static/icon19.png" mode="aspectFit"></image>
			</view>
		</view>
		<view class="area-list-box">
			<!-- 专区列表 -->
			<view class="area-item-box" v-for="(item,index) in info.list" :key="item.store_category_id">
				<block v-if="item.product.length">
					<view class="area-title-box">
						<u-section :title="item.cate_name" font-size="40" :show-line="false" sub-title="查看更多" @click="goSeeMore(item.store_category_id)"></u-section>
					</view>
					<view class="area-goods-box">
						<view
							class="area-goods-item-box"
							v-for="(items, index) in item.product"
							:key="items.product_id"
							@click="goIntegralDetael(items.product_id)"
						>
							<image :src="items.image" mode="aspectFit"></image>
							<view class="area-goods-info-box">
								<text class="ellipsis">{{items.store_name}}</text>
								<text>{{items.price}}积分</text>
							</view>
						</view>
					</view>
				</block>
			</view>
			<!-- 空状态 -->
			<empty v-if="!info.list.length" top="100" bottom="100" desc="暂无内容"></empty>
		</view>
	</view>
</template>

<script>
	import empty from '@/components/custom/emtyp.vue';
	export default {
		components: {
			empty
		},
		data(){
			return {
				info: {},
			}
		},
		onLoad() {
			this.getList()
		},
		methods:{
			// 获取商品列表
			getList: async function () {
				uni.showLoading({ title: '加载中' })
				const { code, data, message } = await this.$u.api.getHallIndex()
				if (code == '1') {
					console.log(data)
					this.info = data
				} else {
					this.$showToast(message || '获取商品列表失败')
				}
			},
			goSeeMore(id){ //跳转查看更多
				this.$gourl(`/pageIndex/integralZone/seeMore?id=${id}`);
			},
			goIntegralDetael(id){ //跳转积分详情
				this.$gourl(`../../pageCart/goodsInfo/integralDetael?id=${id}`);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		width: 100%;height: 100vh;
		overflow: hidden;overflow-y: auto;
		font-family: Microsoft YaHei;
		box-sizing: border-box;
		.top-integral-box{
			position: relative;
			background: #F6F6F6;
			padding: 0 40rpx;
			height: 450rpx;
			font-weight: bold;
			color: #181818;
			.integral-num-box{
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				display: flex; flex-direction: column;
				font-size: 68rpx;
				letter-spacing: 3rpx;
				text:last-child{font-size: 30rpx;}
			}
			.top-icon-box{
				position: absolute;
				top: 100rpx;
				right: 40rpx;
				image{width: 300rpx;height: 300rpx;}
			}
		}
		.area-list-box{
			padding: 50rpx 20rpx; padding-bottom: 0;
			.area-item-box{
				margin-bottom: 50rpx;
				.area-title-box{margin-bottom: 30rpx;}
				.area-goods-box{
					display: flex;justify-content: space-between;
					.area-goods-item-box{
						padding: 20rpx 0;padding-top: 0;
						line-height: 0;
						image{width: 344rpx;height: 344rpx;border-radius: 10rpx;}
						.area-goods-info-box{
							display: flex; flex-direction: column;
							line-height: normal;
							padding-top: 20rpx;
							font-size: 28rpx;
							font-weight: bold;
							color: #333333;
							text:first-child{margin-bottom: 10rpx;max-width: 340rpx;}
						}
					}
				}
			}
		}
	}
</style>